import React, {useEffect} from 'react';
import {QuestionInfoPropsType} from "./interface";
import {Form, Input} from "antd";

const {TextArea} = Input
const PropComponent: React.FC<QuestionInfoPropsType> = (props: QuestionInfoPropsType) => {
  const {title = '', desc = '', onChange, disabled} = props
  const [form] = Form.useForm()
  useEffect(() => {
    form.setFieldsValue({title, desc})
  }, [title, desc]);

  function handleChange() {
    if (!onChange) return
    onChange(form.getFieldsValue())
  }

  return (
    <Form layout={'vertical'}
          disabled={disabled} onValuesChange={handleChange}
          initialValues={{title, desc}} form={form}>
      <Form.Item label={'标题'} name={'title'} rules={[{required: true, message: '请输入内容'}]}>
        <Input placeholder={'请输入内容'}/>
      </Form.Item>
      <Form.Item label={'描述'} name={'desc'}>
        <TextArea/>
      </Form.Item>
    </Form>
  );
};

export default PropComponent;
